<template>
  <div class="comp-navbar" v-loading.fullscreen="loading">
    <div class="comp-navbar__top">
      <div class="logo"></div>
      <div class="navs" @mousewheel="onWheel">
        <div
          class="nav"
          v-for="(nav, index) in topbar.navs"
          :key="index"
          :class="{
            selected: index === topbar.index,
            hidden: nav.name === 'user',
          }"
          @click="onClick(nav)"
        >
          {{ nav.title }}
        </div>
        <!-- <div class="nav" v-if="topbar.navs.length>0"  @click="onClickap('/dap')">驾驶舱</div> -->
        <div
          class="nav"
          v-if="topbar.navs.length > 0"
          @click="onClisquareness('/dap')"
        >
          驾驶舱
        </div>
      </div>
      <div class="tools">
        <div class="tool" v-if="profile">
          <span>{{ profile.name || profile.number }}</span>
          <span class="el-icon-caret-bottom"></span>
          <el-dropdown class="dropdown">
            <div class="dropdown-text"></div>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item icon="el-icon-user" @click.native="getProfile()"
                >个人信息</el-dropdown-item
              >
              <el-dropdown-item icon="el-icon-date" @click.native="getTasks()"
                >系统任务</el-dropdown-item
              >
              <el-dropdown-item
                icon="el-icon-setting"
                @click.native="setPassword()"
                >修改密码</el-dropdown-item
              >
              <el-dropdown-item
                icon="el-icon-switch-button"
                @click.native="logout()"
                >退出登录</el-dropdown-item
              >
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>
    </div>
    <div class="comp-navbar__left">
      <div class="navs">
        <div
          class="nav"
          v-for="(nav, index) in leftbar.navs"
          :key="index"
          :class="{ selected: index === leftbar.index }"
          @click="onClick(nav)"
        >
          <span class="title">{{ nav.title }}</span>
          <span class="text" v-if="nav.text">{{ nav.text }}</span>
        </div>
      </div>
      <div class="supports">
        <div class="supporter">
          广西工业促进和中小企业服务中心
<!--          <span class="text">技术支持</span>-->
<!--          <a class="link" href="" target="_blank">桂林顶鑫</a>-->
        </div>
        <div class="copyright">© {{ year }}</div>
      </div>
    </div>
    <comp-dialog title="修改登录密码" ref="passwordSetForm">
      <el-form
        size="small"
        label-width="112px"
        style="margin-right: 20px"
        @submit.native.prevent
        v-if="passwordSetForm"
      >
        <el-form-item label="旧密码：" required>
          <el-input
            ref="passwordSetFormPassword"
            v-model="passwordSetForm.password"
            type="password"
            style="width: 320px"
            placeholder="请输入"
            :maxlength="20"
            :readonly="loading"
            @change="setPassword('validate')"
          ></el-input>
        </el-form-item>
        <el-form-item label="新密码：" required>
          <el-input
            v-model="passwordSetForm.newpassword"
            type="password"
            style="width: 320px"
            placeholder="请输入"
            :maxlength="20"
            :readonly="loading"
            @change="setPassword('validate')"
          ></el-input>
        </el-form-item>
        <el-form-item label="重复新密码：" required>
          <el-input
            v-model="passwordSetForm.renewpassword"
            type="password"
            style="width: 320px"
            placeholder="请输入"
            :maxlength="20"
            :readonly="loading"
            @change="setPassword('validate')"
          ></el-input>
          <div
            style="padding: 5px 0; width: 320px; color: #aaa; line-height: 1.5"
          >
            <div>新密码格式为8-20位字符。</div>
          </div>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-check"
            @click="setPassword('submit')"
            >修改</el-button
          >
          <el-button
            type="plain"
            icon="el-icon-close"
            @click="setPassword('end')"
            >放弃</el-button
          >
        </el-form-item>
      </el-form>
    </comp-dialog>
  </div>
</template>

<script>
import mixin from "../mixin";
import { string, int } from "../util";
export default {
  name: "comp-navbar",
  mixins: [mixin],
  data: () => ({
    loading: false,
    topbar: {
      navs: [],
      index: -1,
    },
    leftbar: {
      navs: [],
      index: -1,
    },
    passwordSetForm: {
      password: "",
      newpassword: "",
      renewpassword: "",
    },
    year: new Date().getFullYear(),
  }),
  methods: {
    onClickap(a) {
      let num = "/screens";
      let url = this.$router.resolve({
        path: num,
      });

      window.open(url.href, "_blank");
    },
    onClisquareness(a) {
      let num = "/squareness";
      let url = this.$router.resolve({
        path: num,
      });
      window.open(url.href, "_blank");
    },
    onClick(nav) {
      if (this.loading) return;
      this.$router.replace(nav.name);
      if (nav.name == "screens") {
        let num = "/screens";
        let url = this.$router.resolve({
          path: num,
        });
        window.open(url.href, "_blank");
      }
      if (nav.name == "squareness") {
        let num = "/squareness";
        let url = this.$router.resolve({
          path: num,
        });
        window.open(url.href, "_blank");
      }
    },
    onWheel(event) {
      let node = event.currentTarget;
      let direction = event.deltaY > 0 ? 1 : event.deltaY < 0 ? -1 : 0;
      if (direction !== 0)
        node.scrollTo(
          node.scrollLeft +
            (node.scrollWidth / node.children.length) * direction,
          0
        );
    },
    getProfile() {
      if (this.loading) return;
      this.$router.replace("/user/profile");
    },
    getTasks() {
      if (this.loading) return;
      this.$router.replace("/user/tasks");
    },
    setPassword(action, data) {
      if (this.loading) return;
      let form = this.passwordSetForm;
      if (!action || action === "start") {
        form.password = form.newpassword = form.renewpassword = "";
        this.setPassword("validate");
        this.$refs.passwordSetForm.init();
        this.$nextTick(() => this.$refs.passwordSetFormPassword.focus());
      } else if (action === "validate") {
        let error = "";
        form.password = string(form.password);
        error = error || (form.password ? "" : "请输入旧密码！");
        form.newpassword = string(form.newpassword);
        error = error || (form.newpassword ? "" : "请输入新密码！");
        error =
          error || (form.newpassword.length >= 8 ? "" : "新密码格式不正确！");
        form.renewpassword = string(form.renewpassword);
        error = error || (form.renewpassword ? "" : "请重复输入新密码！");
        error =
          error ||
          (form.newpassword === form.renewpassword
            ? ""
            : "两次输入新密码不一致！");
        if (data) this.plugins.modal.toast(error, "error");
        return !error;
      } else if (action === "submit") {
        if (!this.setPassword("validate", true)) return;
        this.loading = true;
        this.plugins.user.setUserPassword(form).then((res) => {
          this.loading = false;
          if (res.code === 0) {
            this.plugins.modal.toast("修改成功！", "success");
            this.setPassword("end");
          } else {
            this.plugins.modal.alert(
              "修改失败",
              res.code + "：" + res.msg,
              "error"
            );
          }
        });
      } else if (action === "end") {
        form.password = form.newpassword = form.renewpassword = "";
        this.$refs.passwordSetForm.close();
      }
    },
    login() {
      if (this.loading) return;
      this.$router.replace({
        name: "login",
        query: { to: this.$route.fullPath },
      });
    },
    logout() {
      if (this.loading) return;
      this.plugins.modal
        .alert("退出登录确认", "确定要退出登录吗？", "warning", [
          "确定退出",
          "再想想",
        ])
        .then((ok) => {
          if (!ok) return;
          this.loading = true;
          this.plugins.user.logout().then((res) => {
            this.loading = false;
            if (res.code === 0) {
              this.plugins.modal.toast("退出登录成功！", "success");
              this.login();
            } else {
              this.login();
            }
          });
        });
    },
    init() {
      if (this.loading) return;

      let topbar = this.topbar;
      let leftbar = this.leftbar;
      let names = this.$root.$options.childs.slice();
      let routes = this.$router.options.routes.filter(
        ({ name, path }) => name && path
      );

      // console.log("routes", routes);
      // console.log("names", names);
      let select = (name) => {
        let route = routes.find((route) => route.name === name);
        return route
          ? route.name === this.$route.name ||
              route.meta.childs.slice().some(select)
          : false;
      };

      let access = (name) => this.access(name);

      topbar.navs.splice(0);
      leftbar.navs.splice(0);
      topbar.index = leftbar.index = -1;

      names.forEach((name) => {
        let route = routes.find((route) => route.name === name && access(name));
        // console.log("route", route);
        let index = route
          ? topbar.navs.push({ name, title: route.meta.title }) - 1
          : -1;
        if (index > -1 && select(name)) {
          topbar.index = index;
          leftbar.navs.push({ name, title: route.meta.title, text: "" });
          route.meta.childs.slice().forEach((name,indexTemp) => {

            // 惠企大数据 市级只看两个菜单

            if(name.includes('stats-')
              && this.profile?.depments?.[0]?.dept?.city?.id
              && !['stats-order-city','stats-order-government-city'].includes(name)){
              return
            }

            let route = routes.find(
              (route) => route.name === name && access(name)
            );
            let index = route
              ? leftbar.navs.push({ name, title: route.meta.title, text: "" }) -
                1
              : -1;
            if (index > -1 && select(name)) leftbar.index = index;
          });
        }
      });
    },
  },
};
</script>

<style lang="scss">
.comp-navbar {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.comp-navbar__top {
  display: flex;
  align-items: center;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  background: url(../assets/img01.png) no-repeat center center/100% 100%;

  & > .logo {
    flex: 0 0 auto;
    margin: 15px;
    width: 150px;
    height: 30px;
    background: url(../assets/logo-2x1.png) no-repeat left center/contain;
    cursor: pointer;
  }

  & > .navs {
    flex: 1 1 0;
    margin: 0 10px;
    height: 60px;
    white-space: nowrap;
    overflow-x: auto;
    overflow-y: hidden;

    &::-webkit-scrollbar {
      display: none;
    }

    & > .nav {
      display: inline-block;
      padding: 20px;
      height: 20px;
      color: rgba(white, 0.5);
      font-size: 16px;
      line-height: 20px;
      vertical-align: top;
      user-select: none;
      cursor: pointer;

      &:hover {
        background-color: rgba(#1677ff, 0.1);
      }

      &.selected {
        color: white;
      }

      &.hidden {
        display: none;
      }
    }
  }

  & > .tools {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    margin: 0 10px;

    & > .tool {
      flex: 0 0 auto;
      padding: 20px;
      height: 20px;
      color: rgba(white, 0.5) !important;
      font-size: 16px;
      line-height: 20px;
      cursor: pointer;

      & > .dropdown {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;

        & > .dropdown-text {
          height: 100%;
        }
      }

      &:hover {
        background-color: rgba(#1677ff, 0.1);
      }
    }
  }
}

.comp-navbar__left {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 60px;
  left: 0;
  width: 180px;
  height: calc(100% - 60px);
  background-color: #f6f6f6;

  & > .navs {
    flex: 1 1 0;
    overflow-x: hidden;
    overflow-y: auto;

    &::-webkit-scrollbar {
      display: none;
    }

    & > .nav {
      margin-bottom: 10px;
      padding: 10px 30px;
      display: flex;
      justify-content: flex-start;
      align-items: flex-start;
      user-select: none;
      cursor: pointer;

      & > .title {
        flex: 0 1 auto;
        min-height: 20px;
        color: #333;
        font-size: 14px;
        line-height: 20px;
      }

      & > .text {
        flex: 0 0 auto;
        margin-left: 0.5em;
        height: 20px;
        color: #999;
        font-size: 14px;
        line-height: 20px;
      }

      &:hover {
        background-color: rgba(black, 0.05);
      }

      &:first-child {
        padding: 30px;
        pointer-events: none;

        & > .title {
          color: #999;
          font-size: 16px;
        }

        &:hover {
          background-color: transparent;
        }
      }

      &.selected {
        border-right: solid 4px #146cff;
        padding-right: 26px;
        background-color: #d9e5f5;

        & > .title {
          color: #146cff;
          font-weight: bold;
        }

        &:hover {
          background-color: #d9e5f5;
        }
      }
    }
  }

  & > .supports {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    padding: 10px;

    & > .supporter {
      flex: 0 0 auto;
      color: #999;
      font-size: 12px;
      line-height: 20px;
      text-align: center;

      & > .text {
        margin: 0 4px;
      }

      & > .link {
        margin: 0 4px;
        color: inherit;
        text-decoration: none;
        cursor: pointer;

        &:hover {
          text-decoration: underline;
        }
      }
    }

    & > .copyright {
      flex: 0 0 auto;
      color: #999;
      font-size: 12px;
      line-height: 20px;
      text-align: center;
    }
  }
}
</style>
